<template>
  <div>
    <bread></bread>
    <!-- 面包屑 -->
    <el-card>
      <el-row>
          <el-col :span="8">
             <el-input placeholder="请输入内容">
               <el-button slot="append" icon="el-icon-search"></el-button>
             </el-input>
         </el-col>
          
      </el-row>
    </el-card>
    <!-- 搜索框 -->
    <el-table
    :data="ordersData"
    border
    style="width: 100%">
    <el-table-column type="index" label="#">
    </el-table-column>
    <el-table-column prop="order_number" label="订单编号" >
    </el-table-column>
    <el-table-column prop="order_price" label="订单价格" >
    </el-table-column>
    <el-table-column prop="pay_status" label="是否付款" >
         <template slot-scope="scope">
             <el-tag effect="dark" size="mini" v-if="scope.row.pay_status==1">已付款</el-tag>
             <el-tag effect="dark" type="danger"  v-if="scope.row.pay_status==0" size="mini">未付款</el-tag>
         </template>
    </el-table-column>
    <el-table-column prop="is_send" label="是否发货" >
    </el-table-column>
    <el-table-column prop="create_time" label="下单时间" >
        <template slot-scope="scope">
            {{scope.row.create_time | dataForm}}
        </template>
    </el-table-column>
    <el-table-column  label="操作" >
        <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="修改订单地址" placement="top-start">
             <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditAddress"></el-button>
            </el-tooltip>
             <el-tooltip class="item" effect="dark" content="物流信息" placement="top-start">
             <el-button type="success" icon="el-icon-location" size="mini" @click="showProgress"></el-button>
            </el-tooltip>
        </template>
    </el-table-column>
  </el-table>
  <!-- 订单列表表格内容 -->
<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <!-- 分页 -->
<el-dialog title="修改地址" :visible.sync="dialogaddressVisible">
   <el-form :model="addressForm" :rules="addressRules" ref="addressFormRef">
    <el-form-item label="省市区/县" prop="address1">
         <el-cascader
    v-model="addressForm.address1"
    :options="cityData"
    ></el-cascader>
    </el-form-item>
    <el-form-item label="详细地址" prop="address2">
      <el-input v-model="addressForm.address2" autocomplete="off"></el-input>
    </el-form-item>
    
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogaddressVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogaddressVisible = false">确 定</el-button>
  </div>
</el-dialog>


<!-- 物流信息对话框 -->
<el-dialog title="物流进度" :visible.sync="progressVisible">
  <el-timeline>
    <el-timeline-item
      v-for="(activity, index) in progressInfo"
      :key="index"
      :timestamp="activity.time">
      {{activity.context}}
    </el-timeline-item> 
  </el-timeline>
  <div slot="footer" class="dialog-footer">
    <el-button @click="progressVisible = false">取 消</el-button>
    <el-button type="primary" @click="progressVisible = false">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>
<script>
import ordersApi from "@/api/orders.js"
import bread from "@/components/bread";
import cityData from './citydata.js'
export default {
  components: {
    bread,
  },
  data(){
      return {
          cityData:cityData,
          ordersData:[], 
          queryInfo:{
              query:"",  
              pagenum:1,  
              pagesize:10  
          },
          total:0 , 
          dialogaddressVisible:false,  
          progressVisible:false,  
          progressInfo:[],   
          addressForm:{
              address1:[],
              address2:""
          },
          addressRules:{
              address1:[
                  {required:true,message:"请选择省市区县",trigger:'blur'}
              ],
              address2:[
                  {required:true,message:"请输入详细地址",trigger:'blur'}
              ]
          }

      }
  },
  created(){
    this.getorderList()
  },
  methods:{
      add0(m){return m<10?'0'+m:m },
      getorderList(){  
         this.$axios.get('orders',{
             params:this.queryInfo
         })
         .then(res=>{
             console.log(res,"dingdan")
            if(res.meta.status!=200){
                return this.$message.error("获取订单列表失败")
            }
            this.total=res.data.total  
            this.ordersData=res.data.goods
         })
      },
     handleSizeChange(val) {
      this.queryInfo.pagesize = val;
      this.getorderList(); 
    },
    handleCurrentChange(val) {
      this.queryInfo.pagenum = val;
      this.getorderList(); 
    },
    showEditAddress(){ 
       this.dialogaddressVisible=true

    },
    showProgress(){ 
        this.$axios.get('/kuaidi/804909574412544580')
        .then(res=>{
           if(res.meta.status!=200){
            return this.$message.error('获取物流信息失败')
           }
           this.progressInfo=res.data
        })
        this.progressVisible=true  
    }
  }
};
</script>